<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span v-if="authorityHandle(102)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(102)"
        v-model="listQuery.userType"
        class="filter-item right-item width-control"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">房间类型</span>
      <k-select
        v-model="listQuery.roomType"
        class="filter-item right-item width-control"
        :select-params="[{ label: '玩家对战房', value: 2 }, { label: '主播对战房', value: 3 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">房间分类</span>
      <k-select
        v-model="listQuery.roomClass"
        class="filter-item right-item width-control"
        :select-params="[{ label: '两人对战房', value: 2 }, { label: '三人对战房', value: 3 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">房间状态</span>
      <k-select
        v-model="listQuery.roomStatus"
        class="filter-item right-item width-control"
        :select-params="[{ label: '等待中', value: 1 }, { label: '进行中', value: 2 }, { label: '已结束', value: 3 }, { label: '已取消', value: 4 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">创建时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
      <span class="filter-title filter-item">对战时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>

    <div class="handle-main">
      <div class="handle-item">
        <el-input v-model="userMobile" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入用户手机号" />
        <k-button class="top-btn" value="处理" @click.native="setDealUserData" />
      </div>
      <div class="handle-item">
        <el-input v-model="roomId" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入房间id" />
        <k-button class="top-btn" value="处理" @click.native="setDealRoomData" />
      </div>
    </div>

    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="roomId" min-width="120px" label="房间ID" align="center" show-overflow-tooltip />
      <el-table-column prop="creatorMobile" min-width="100px" label="创建者" align="center" show-overflow-tooltip />
      <el-table-column min-width="100px" label="参与者" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="join-cell">{{ getBattelJoinUser(scope) }}</div>
        </template>
      </el-table-column>
      <el-table-column min-width="250px" label="对战内容" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="image-div">
            <div v-for="item in scope.row.boxList" :key="item.id" class="image-item" :title="item.boxName">
              <KImage :imagevalue="item.boxIcon" width-item="50px" height-item="50px" />
              <i class="boxCount">{{ item.boxCount }}</i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="roomPrice" min-width="120px" label="对战价值(R)" align="center" show-overflow-tooltip />
      <el-table-column min-width="120px" label="对战结果" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getBattelResult(scope) }}
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="房间类型" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getRoomType(scope) }}
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="房间分类" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.roomClass }}人对战房
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="房间状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getRoomStatus(scope) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" min-width="120px" label="创建时间" align="center" show-overflow-tooltip />
      <el-table-column prop="startTime" min-width="120px" label="对战时间" align="center" show-overflow-tooltip />
      <el-table-column min-width="120px" label="操作" align="center">
        <template slot-scope="scope">
          <k-button class="table-btn" value="对战结果" :disabled="scope.row.roomStatus !== 3" @click.native="openBattleResult(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />

    <!-- 设置弹窗 -->
    <k-dialog :show-hide.sync="battleResultDialog" :modal-append-to-body="false" :append-to-body="true" title="对战结果" class="addBox-dialog" :show-foot="false" :two-btn="false">
      <div class="table_contanier">
        <div class="cloumn1">
          <div class="cell" />
          <div class="cell">用户名</div>
          <div class="cell">开箱获得饰品</div>
          <div class="cell">饰品总价值(J)</div>
          <div class="cell">最终获得</div>
          <!-- <div class="cell">获得晶粹</div> -->
        </div>
        <div v-for="(item, index) in recordList" :key="index" class="dynamic_cloumn">
          <div class="cell">{{ getIsWin(item, index) }}</div>
          <!--獲勝者-->
          <div class="cell">{{ item.userMobile }}</div>
          <!--用户名-->
          <div class="cell" :title="JSON.parse(item.openGoodsNames).join()">{{ JSON.parse(item.openGoodsNames).join() }}</div>
          <!--饰品-->
          <div class="cell">{{ item.openPrice }}</div>
          <!--饰品总价值-->
          <div class="cell" :title="JSON.parse(item.goodsNames).join() + '--' + item.winPrice + '晶粹'">{{ JSON.parse(item.goodsNames).join() + '--' + item.winPrice + '晶粹' }}</div>
          <!--最红获得-->
          <!-- <div class="cell">{{ item.openAmmo }}</div> -->
          <!--获得晶粹-->
        </div>
      </div>
    </k-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { LisRoomData } from '@/api/battel/index'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
import { dealUserData, dealRoomData } from '@/api/battel/index'
export default {
  components: { Pagination, hqSearchDown },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '创建者',
          value: 'createUser'
        },
        {
          label: '参与者',
          value: 'inUser'
        }
      ],
      battleResultDialog: false,
      timeValue: '',
      timeValueGet: '',
      setShow: false,
      chargeSetting: {
        // 首充赠送
        firstGive: undefined,
        draw: undefined
      },
      listData: [],
      recordList: [],
      payAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 身份所属",
        roomType: undefined, // 消费挡位",
        roomClass: undefined, // 具体消费金额 不需要前端传递",
        roomStatus: undefined, // 消费状态",
        startCreateTime: '', // 最早创建时间",
        endCreateTime: '', // 最终创建时间",
        startStartTime: '', // 最早支付时间",
        endStartTime: '', // 最终支付时间",
        key: '' // 饰品名称'
      },
      userMobile: '',
      roomId: ''
    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startCreateTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endCreateTime = this.timeValue ? this.timeValue[1] : null
    },
    timeValueGet(val) {
      this.listQuery.startStartTime = this.timeValueGet ? this.timeValueGet[0] : null
      this.listQuery.endStartTime = this.timeValueGet ? this.timeValueGet[1] : null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    setDealUserData() {
      if (!this.userMobile || this.userMobile.length != 11) {
        this.$message.error('用户手机号格式错误')
        return
      }
      dealUserData({ mobile: this.userMobile }).then(res => {
        this.$message.success('操作成功')
      })
    },

    setDealRoomData() {
      if (!this.roomId) {
        this.$message.error('请输入房间ID')
        return
      }
      dealRoomData({ roomId: this.roomId }).then(res => {
        this.$message.success('操作成功')
      })
    },
    // 房间状态
    getRoomStatus(scope) {
      const roomStatus = scope.row.roomStatus
      let roomStatusName = ''
      switch (roomStatus) {
        case 1:
          roomStatusName = '等待中'
          break
        case 2:
          roomStatusName = '进行中'
          break
        case 3:
          roomStatusName = '已结束'
          break
        case 4:
          roomStatusName = '已取消'
          break
      }
      return roomStatusName
    },
    // 房间类型
    getRoomType(scope) {
      const roomType = scope.row.roomType
      let roomTypeName = ''
      switch (roomType) {
        case 2:
          roomTypeName = '玩家对战房'
          break
        case 3:
          roomTypeName = '主播对战房'
          break
        case 4:
          roomTypeName = 'AI对战房'
          break
      }
      return roomTypeName
    },
    // 参与人员
    getBattelJoinUser(scope) {
      const rowData = scope.row
      const res = rowData.recordList.map(item => {
        return item.userMobile
      })
      return res.join('、')
    },
    // 获取对战结果
    getBattelResult(scope) {
      const rowData = scope.row
      if (rowData.roomStatus === 1) {
        return '等待中'
      } else if (rowData.roomStatus === 2) {
        return '进行中'
      } else if (rowData.roomStatus === 3) {
        this.$log(rowData.recordList)
        const recordList = rowData.recordList
        const recordLists = recordList.filter(item => {
          return item.winStatus === 1
        })
        if (recordLists.length === 0) {
          return '平局'
        } else {
          const res = recordLists.map(item => {
            return item.userMobile
          })
          return res.join('、') + '胜'
        }
      } else {
        return '已取消'
      }
    },
    loadData(v) {
      LisRoomData({ ...this.listQuery, ...v }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        if (!data.totalData) return
      })
    },
    openBattleResult(row) {
      this.battleResultDialog = true
      this.recordList = row.recordList
      const recordLists = row.recordList.filter(item => {
        return item.winStatus === 1
      })
      this.$log('对战结果：', recordLists)
    },
    getIsWin(item, index) {
      let winStr = ''
      switch (item.winStatus) {
        case 1:
          winStr = '获胜者'
          break
        case 2:
          winStr = '失败者'
          break
        case 3:
          winStr = '平局'
          break
      }
      return winStr
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.loadData(v)
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
$borderColor: #e8e8e8; // 主色调

.handle-main {
	display: flex;
	margin-top: 20px;
	.handle-item {
		display: flex;
		align-items: center;
		width: 250px;
		margin-right: 50px;
	}
}

.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.width-control {
		width: 120px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.right-item {
		margin-right: 10px;
	}

	::v-deep .el-range-editor.el-input__inner {
		width: 250px;
	}
}

.addBox-dialog {
	::v-deep .el-dialog__body {
		padding: 30px 80px;
	}

	.table_contanier {
		display: flex;
		flex-direction: row;

		.cloumn1 {
			width: 125px;
			border: 1px solid $borderColor;
			border-top: none;
		}

		.cell {
			text-align: center;
			line-height: 60px;
			height: 60px;
			padding: 0 10px;
			box-sizing: border-box;
			border-top: 1px solid $borderColor;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.dynamic_cloumn {
			width: 290px;
			border: 1px solid $borderColor;
			border-top: none;
			margin-left: -1px;
		}
	}
}

.join-cell {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.image-div {
	display: flex;
	flex-direction: row;
	justify-content: center;

	.image-item {
		position: relative;
		width: 70px;
		height: 70px;

		.imageicon {
			width: 70px;
			height: 70px;
		}

		.boxCount {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 19px;
			height: 19px;
			font-size: 14px;
			font-weight: 700;
			font-style: normal;
			// border: 1px solid $mainColor;
			// border-radius: 50%;
			position: absolute;
			color: $mainColor;
			right: 0;
			top: 0;
			transform: translateX(5px);
		}

		&::before {
			display: block;
			content: '×';
			font-size: 14px;
			font-weight: 700;
			position: absolute;
			color: $mainColor;
			right: 0;
			top: 0;
			transform: translateX(-10px);
		}
	}
}
</style>
